<template>
  <view class="min-vh-100 d-flex flex-column">
    <StatusBar></StatusBar>
    <HeaderComponent title="在线开户" title2="客服" class="w-100" style="width: 10%"></HeaderComponent>
    <view class="my-5 text-center fw-bold" style="font-size: 1.5rem">
      开户准备材料
    </view>
    <view class="d-flex justify-content-around text-center">
      <view class="col-3 mx-2 my-2 d-flex flex-column justify-content-center align-items-center"
            :key="index" v-for="(item, index) in prepareList">
        <view class="d-flex justify-content-center align-items-center rounded-circle fs-3 fw-bold"
              style="background-color: #eb344a;color: white;width: 4rem;height: 4rem">
          {{ item.num }}
        </view>
        <view class="my-2 fw-bold text-center">
          {{ item.name }}
        </view>
      </view>
    </view>
    <view @tap="goto('./support_bank/support_bank')" class="text-center">
      <text style="border-bottom: blue solid 0.1rem;color:blue;font-size: 0.8rem">支持的银行卡></text>
    </view>
    <view class="text-center mt-5 text-secondary">开户时间: 交易日8:45-17:45</view>
    <view @tap="downloadApp" class="mx-4 my-1 py-2 text-center fs-4 rounded-3"
          style="background-color: #EB344A; color: white;">
      下载开户APP
    </view>
    <view class="m-1 text-center" style="color: #EB344A;font-size: 0.8rem;">
      交易日15点前完成开户,最快当天夜盘可参与交易
    </view>
    <view class="mt-5 text-center fs-4 fw-bold">客服热线: 400-8888-933</view>
    <view class="flex-grow-1 pb-5 d-flex flex-column justify-content-end">
      <view class="d-flex justify-content-evenly text-secondary">
        <view @tap="goto('./common_problem/common_problem')">常见问题</view>
        <view>|</view>
        <view>银期转账</view>
        <view>|</view>
        <AttentionWx class="text-secondary"></AttentionWx>
      </view>
    </view>
  </view>
</template>

<script>
import HeaderComponent from "../common/HeaderComponent.vue";
import AttentionWx from "../common/AttentionWx.vue";
import StatusBar from "../common/StatusBar.vue";

export default {
  name: 'start',
  data() {
    return {
      prepareList: [
        {
          'num': 1,
          'name': '身份证原件'
        },
        {
          'num': 2,
          'name': '银行卡'
        },
        {
          'num': 3,
          'name': '笔和白纸'
        },
      ]
    }
  },
  onLoad() {
    // uni.setNavigationBarTitle({
    // 	title: "在线开户"
    // });
  },
  components: {
    StatusBar,
    AttentionWx,
    HeaderComponent,
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
    downloadApp() {
      uni.showToast({
        title: '请前往应用商店下载APP',
        icon: 'none',
        duration: 2000
      });
    },
  }
}
</script>

<style>
</style>
